{extend name="layouts/app" /}

{block name="css"}
<link rel="stylesheet" href="/static/home/css/css.css">
<link rel="stylesheet" href="/static/home/css/style.css">
<link rel="stylesheet" href="/static/home/css/media.css">
<link rel="stylesheet" href="/static/home/css/banner.css">
<link rel="stylesheet" href="/static/home/css/slick.css">
<link rel="stylesheet" href="/static/home/css/animate.min.css">
<link rel="stylesheet" href="/static/home/css/swiper-3.4.2.min.css">
<link rel="stylesheet" href="/static/home/css/idangerous.swiper.css">
<link rel="stylesheet" href="/static/home/css/bootstrap.min.css">
{/block}

{block name="main"}
<!-- header-end -->
<div class="banner pc">
    <div class="bannerfiex">
        <div id="six_ban">
            <ul>
                {volist name="slides" id="slide"}
                <li class="ban_box" style="background:url({$slide->previewImage}) no-repeat center center; background-size: cover;">
                    <i style="display: none;"><img src="{$slide->previewImage}"></i>
                    <div class="intro">
                        <div class="all_img">
                            <a href=""></a>
                        </div>
                    </div>
                </li>
                {/volist}
            </ul>
            <div class="six_bandot"><i></i></div>
        </div>
    </div>
</div>
<!--banner end-->
<!-- content -->
<div class="content" id="content">
    <div class="section home1" style="background: url(/static/home/images/1534339819930992.jpg) no-repeat center center; background-size: cover; visibility: visible">
        <i style="display: none;"><img src="/static/home/images/1534339819930992.jpg"></i>
        <div class="w1560">
            <div class="title hmtit hm1tit wow slideInUp" data-wow-duration="1.5s" data-wow-delay="0.2s">
                <h2><span>service</span><small>/ 服务</small></h2>
                <p>合理的要求是锻炼　不合理的要求是磨炼</p>
            </div>
            <div class="text hm1text wow slideInUp" data-wow-duration="1.5s" data-wow-delay="0.2s">
                <div class="hm1row row">
                    <div class="hm1flbox col-md-7" style="height:600px">
                        <div class="hm1fldiv">
                            <div class="hm1slider">
                                <div class="item">
                                    <ul class="itemul">
                                        <li><i class="item1li1"><img class="lazy" data-original="/static/home/images/15393138168874571.png" src="/static/home/images/1539313816887457.png"></i></li>
                                        <li><i class="item1li2"><img class="lazy" data-original="/static/home/images/15393138258112951.png" src="/static/home/images/1539313825811295.png"></i></li>
                                    </ul>
                                </div>
                                <div class="item">
                                    <ul class="itemul">
                                        <li><i class="item2li1"><img class="lazy" data-original="/static/home/images/15393138474041321.png" src="/static/home/images/1539313847404132.png"></i></li>
                                        <li><i class="item2li2"><img class="lazy" data-original="/static/home/images/15393145195045151.png" src="/static/home/images/1539314519504515.png"></i></li>
                                        <li><i class="item2li3"><img class="lazy" data-original="/static/home/images/15393145297203841.png" src="/static/home/images/1539314529720384.png"></i></li>
                                    </ul>
                                </div>
                                <div class="item">
                                    <ul class="itemul">
                                        <li><i class="item3li1"><img class="lazy" data-original="/static/home/images/15393138987498481.png" src="/static/home/images/1539313898749848.png"></i></li>
                                        <li><i class="item3li2"><img class="lazy" data-original="/static/home/images/15393139073862071.png" src="/static/home/images/1539313907386207.png"></i></li>
                                        <li><i class="item3li3"><img class="lazy" data-original="/static/home/images/15393139158031971.png" src="/static/home/images/1539313915803197.png"></i></li>
                                        <li><i class="item3li4"><img class="lazy" data-original="/static/home/images/15393139233271831.png" src="/static/home/images/1539313923327183.png"></i></li>
                                        <li><i class="item3li5"><img class="lazy" data-original="/static/home/images/15393139462629661.png" src="/static/home/images/1539313946262966.png"></i></li>
                                        <li><i class="item3li6"><img class="lazy" data-original="/static/home/images/15393139557817401.png" src="/static/home/images/1539313955781740.png"></i></li>
                                        <li><i class="item3li7"><img class="lazy" data-original="/static/home/images/15393139661400151.png" src="/static/home/images/1539313966140015.png"></i></li>
                                        <li><i class="item3li8"><img class="lazy" data-original="/static/home/images/15393139761183551.png" src="/static/home/images/1539313976118355.png"></i></li>
                                        <li><i class="item3li9"><img class="lazy" data-original="/static/home/images/15393139851897351.png" src="/static/home/images/1539313985189735.png"></i></li>
                                    </ul>
                                </div>
                                <div class="item">
                                    <ul class="itemul">
                                        <li><i class="item4li1"><img class="lazy" data-original="/static/home/images/15393140685639981.png" src="/static/home/images/1539314068563998.png"></i></li>
                                        <li><i class="item4li2"><img class="lazy" data-original="/static/home/images/15393140768221441.png" src="/static/home/images/1539314076822144.png"></i></li>
                                        <li><i class="item4li3"><img class="lazy" data-original="/static/home/images/15393140975783551.png" src="/static/home/images/1539314097578355.png"></i></li>
                                        <li><i class="item4li4"><img class="lazy" data-original="/static/home/images/15393140836450281.png" src="/static/home/images/1539314083645028.png"></i></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="hm1but cl">
                            <a class="hmswp-but hm1-left" href="#">
                                <small><img src="/static/home/images/hm1prev1.png"><img src="/static/home/images/hm1prev2.png"></small>
                            </a>
                            <a class="hmswp-but hm1-right" href="#">
                                <small><img src="/static/home/images/hm2prev1.png"><img src="/static/home/images/hm2prev2.png"></small>
                            </a>
                        </div>
                    </div>
                    <div class="hm1frbox col-md-5">
                        <div class="hm1frdiv">
                            <div class="hm1slider2">
                                <div class="buildcon" data-num="1">
                                    <div>
                                        <div class="tit hm1frtit">
                                            <h3>
                                                <span>Website</span>
                                                <small>高端定制网站</small>
                                            </h3>
                                        </div>
                                        <div class="txt hm1frtxt">
                                            <ul class="hm1frlist cl">
                                                <li><a href="3.html">企业 &amp; 高端官网设计</a></li>
                                                <li><a href="3.html">营销型网站建设</a></li>
                                                <li><a href="3.html">集团 &amp; 品牌网站设计</a></li>
                                                <li><a href="3.html">电子商务功能平台</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="buildcon" data-num="2">
                                    <div>
                                        <div class="tit hm1frtit">
                                            <h3>
                                                <span>Mobile</span>
                                                <small>移动互联网开发</small>
                                            </h3>
                                        </div>
                                        <div class="txt hm1frtxt">
                                            <ul class="hm1frlist cl">
                                                <li><a href="4.html">手机端网站</a></li>
                                                <li><a href="4.html">响应式网站</a></li>
                                                <li><a href="4.html">H5微场景</a></li>
                                                <li><a href="4.html">微网站</a></li>
                                                <li><a href="4.html">小程序</a></li>
                                                <li><a href="4.html">APP</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="buildcon" data-num="3">
                                    <div>
                                        <div class="tit hm1frtit">
                                            <h3>
                                                <span>OPERATIONS</span>
                                                <small>运维服务</small>
                                            </h3>
                                        </div>
                                        <div class="txt hm1frtxt">
                                            <ul class="hm1frlist cl">
                                                <li><a href="6.html">主机租用</a></li>
                                                <li><a href="6.html">服务器托管</a></li>
                                                <li><a href="6.html">网站内容维护编辑</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="buildcon" data-num="4">
                                    <div>
                                        <div class="tit hm1frtit">
                                            <h3>
                                                <span>WECHAT</span>
                                                <small>微信开发 / 小程序开发</small>
                                            </h3>
                                        </div>
                                        <div class="txt hm1frtxt">
                                            <ul class="hm1frlist cl">
                                                <li><a href="5.html">微官网</a></li>
                                                <li><a href="5.html">微场景</a></li>
                                                <li><a href="5.html">微商城</a></li>
                                                <li><a href="5.html">小程序</a></li>
                                                <li><a href="5.html">微信公众号运维</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hm1ulist">
                                <ul class="hm1ul cl">
                                    <li class="active"><p>高端定制网站</p></li>
                                    <li><p>移动互联网开发</p></li>
                                    <li><p>运维服务</p></li>
                                    <li><p>微信开发 / 小程序开发</p></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--home1 end-->
    <div class="section home5" style="background-color: #eeeeee;">
        <div class="w1560">
            <div class="rel">
                <div class="title hmtit hm4tit hm5tit wow slideInUp" data-wow-duration="1.5s" data-wow-delay="0.2s">
                    <h2>
                        <span>NEWS</span><small>/ 新闻</small>
                    </h2>
                    <p>让价值共享</p>
                </div>
                <div class="hmmore wow slideInUp" data-wow-duration="1.5s" data-wow-delay="0.2s">
                    <a href="{:url('articles/index')}">
                        <span>read more</span>
                        <small><img src="/static/home/images/hmmore.png"></small>
                    </a>
                </div>
            </div>
            <div class="text hm5text">
                <div class="row">
                    <div class="col-md-3 pc wow slideInUp" data-wow-duration="1.5s" data-wow-delay="0.2s">
                        <div class="swiper-container swiper-hm5">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <a href="javascript:;"><img class="lazy" data-original="/static/home/images/1537333974760376.jpg" src="/static/home/images/1537333974760376.jpg"></a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="javascript:;"><img class="lazy" data-original="/static/home/images/1553246850604514.gif" src="/static/home/images/1553246850604514.gif"></a>
                                </div>
                            </div>
                            <div class="pagination-hm5"></div>
                            <!-- <div class="hm5but cl">
                                <a class="hmswp-but hm5-left" href="#">
                                    <small><img src="/static/frontend//static/home/images/hm1prev1.png"/><img src="/static/frontend//static/home/images/hm1prev2.png"/></small>
                                </a>
                                <a class="hmswp-but hm5-right" href="#">
                                    <small><img src="/static/frontend//static/home/images/hm2prev1.png"/><img src="/static/frontend//static/home/images/hm2prev2.png"/></small>
                                </a>
                            </div> -->
                        </div>
                    </div>
                    <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 col-1024">
                        <div class="hm5nrow row">
                            {volist name="articles" id="article"}
                            <div class="col-lg-6 col-md-6 col-sm-6  col-xs-12">
                                <div class="hm5li cl rel wow slideInUp" data-wow-duration="1.5s" data-wow-delay="0.2s">
                                    <div class="hm5lifl fl disv h100b">
                                        <div class="disvc">
                                            <p>
                                                <span>{$article->create_time|date="d"}</span>
                                                <span class="timesg"><i><img src="/static/home/images/timesg1.png"><img src="/static/home/images/timesg2.png"></i></span>
                                                <span>{$article->create_time|date="m"}</span>
                                            </p>
                                            <small>{$article->create_time|date="Y"}</small>
                                        </div>
                                    </div>
                                    <div class="hm5lifr">
                                        <a href="{:url('articles/show')}?id={$article->id}">
                                            <div class="hm5lifrdiv">
                                                <div class="text">
                                                    <p>{$article->title}</p>
                                                </div>
                                                <div class="more">
                                                    <span>Read more</span>
                                                </div>
                                                <div class="hmjian hm5jian">
                                                    <i><img src="/static/home/images/hm2jian1.png"><img src="/static/home/images/hm2jian3.png"></i>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--home5 end-->
</div>
<!--content end-->
{/block}

{block name="script"}
<script src="/static/home/js/banner.js?v=13"></script>
<script src="/static/home/js/wow.min.js"></script>
<script src="/static/home/js/jquerys.js"></script>
<script src="/static/home/js/swiper-3.4.2.min.js"></script>
<script src="/static/home/js/jquery.lazyload.min.js"></script>
<script src="/static/home/js/slick.js"></script>
<script>
    new WOW().init();
    $("img.lazy").each(function(){
        var yt = $(this).attr('src');
        var slt = $(this).data('original');
        $(this).attr('src', slt);
        $(this).attr('data-original', yt);
    })
    /* $(function() {
         $("img.lazy").lazyload({
             effect: "fadeIn",
             threshold: 200
         });
     });*/
    $(function(){
        $('.hm1slider').slick({
            dots: false,
            slidesToShow: 1,
            speed: 1000,
            autoplay: true,
            autoplaySpeed: 37000,
            arrows: false,
            asNavFor: ".hm1slider2"
        })
        $('.hm1-left').click(function(event) {
            event.preventDefault();
            $('.hm1slider2').slick("prev");
        });
        $('.hm1-right').click(function(event) {
            event.preventDefault();
            $('.hm1slider2').slick("next");
        });

        $('.hm1slider2').slick({
            dots: false,
            slidesToShow: 1,
            speed: 1000,
            autoplay: true,
            autoplaySpeed: 37000,
            arrows: false,
            asNavFor: ".hm1slider"
        })

        var $slick_slide = $('.hm1slider');
        $slick_slide.on('afterChange',function(event,slick,currentSlide){
            var $data = $('.buildcon.slick-current').attr("data-num")-1;
            $(".hm1ul li").eq($data).addClass("active").siblings().removeClass("active");
        });

        $(".hm1ul li").click(function(){
            var hm1ulind = $(this).index();
            $('.hm1slider').slick('slickGoTo', hm1ulind);
            $('.hm1slider2').slick('slickGoTo', hm1ulind);
        })

        var windowHeight = $(window).height();
        var headerHeight = $(".header").height();
        $(".banner.iph").height(windowHeight-headerHeight);

        var mySwiper5 = new Swiper('.swiper-hm5',{
            direction : 'horizontal',
            pagination: '.pagination-hm5',
            slidesPerView: 1,
            loop: true,
            autoplay : 5000,
            speed:1000,
            autoplayDisableOnInteraction : false,
            grabCursor: true,
            paginationClickable: true,
            updateOnImagesReady : true
        });
    })
</script>
{/block}